---
title: Using Permissions
tags:
  - permissions
  - RBAC
  - useRBAC
---

Currently, there are a few different ways to use permissions in the application. This document will explain the different ways, how to use them and suggestions
on when is best to use them. It's advised that you've read [how they work](../01-how-they-work.mdx) and [fetching permissions](fetching-permissions.mdx) before reading this document so you have the full context.

## Components

There are two different wrapper components available to use. They are very similar but have different use cases. They are both
available in the `@strapi/strapi/admin`.

### CheckPagePermissions

Used to apply RBAC to a view/page of the application. If the user does not have the permissions to access this page they will
be redirect to the homepage.

#### Usage

```tsx
import { Page } from '@strapi/strapi/admin';

const permissions = [{ action: 'plugins::my-plugin.access', subject: null }];

const MyPage = () => {
  return (
    <Page.Protect permissions={permissions}>
      <h1>aha you found me</h1>
    </Page.Protect>
  );
};
```

#### Typescript

```ts
interface Permission {
  id: number;
  action: string;
  subject: string | null;
  // This can be custom defined to the needs of the plugin/application
  properties: Record<string, any>;
  conditions: Array<string>;
}

type CheckPagePermissionsProps = {
  permissions: Permission[];
  children: React.ReactNode;
};

type CheckPagePermissions = (props: CheckPagePermissionsProps) => JSX.Element;
```

## useRBAC

Is a wrapper around the [`hasPermissions`](#haspermissions) function which calls the `/admin/permissions/check` endpoint with a provided
list of permissions to assertain if a user can do a specific action. This hook is typically used with plugin permissions alongside the
global permissions object generated from the [`useRBACProvider`](#userbacprovider) hook which can either be passed or will be accessed internally.

Because it's fetching, we also provide a `isLoading` state which can be used to show a loading state while the permissions are being fetched.
If the hook is unmouted before the fetch request completes, the request will be cancelled via an [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).

### Usage

In the below example, we're checking if a user can "create" a post from the content-manager list view. If they can't, the button is `disabled`.

```tsx
import { useRBAC } from '@strapi/strapi/admin';

const MyComponent = () => {
  const { isLoading, allowedActions } = useRBAC({
    create: [
      {
        action: 'plugin::content-manager.explorer.create',
        subject: 'api::post.post',
      },
    ],
  });

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return <button disabled={!allowedActions.canCreate}>create entry</button>;
};
```

### Typescript

```ts
interface Permission {
  id: number;
  action: string;
  subject: string | null;
  // This can be custom defined to the needs of the plugin/application
  properties: Record<string, any>;
  conditions: Array<string>;
}

interface PluginPermissions {
  create: Permission[];
  read: Permission[];
  update: Permission[];
  delete: Permission[];
  publish: Permission[];
}

type UseRBAC = (
  pluginPermissions: PluginPermissions,
  permissions?: Permission[]
) => {
  isLoading: boolean;
  setIsLoading: () => void;
  allowedActions: {
    canCreate: boolean;
    canRead: boolean;
    canUpdate: boolean;
    canDelete: boolean;
    canPublish: boolean;
  };
};
```
